<template>
    <div class="home-index">
        <div class="home-index-user">
            <van-image class="home-index-user-image" :src="userInfo?.avatarUrl" round fit="cover" />
            <div class="home-index-user-info">
                <div class="home-index-user-info-name">{{ userInfo?.nickName }}</div>
                <div class="home-index-user-info-dandp">
                    {{ userInfo.dept?.deptName }} | {{ positionName(userPost) }}
                </div>
            </div>
            <div class="menu" @click="messageClcik">
                <van-badge :dot="messageTotal > 0">
                    <van-image class="menu_cion" :src="icon_xiaoxi" />
                </van-badge>
            </div>



        </div>
        <div class="home-index-notice">
            <van-image class="notice_icon" :src="gonggao" />
            <van-notice-bar class="font" scrollable :text="versionNotice" />
        </div>
        <div class="home-index-data">
            <div class="home-index-data-title">
                <div class="home-index-data-title-title">
                    <van-image class="home-index-todo-title-image" :src="sjjbImage" />
                    <div class="home-index-data-title-title-text">数据简报</div>
                </div>
                <div class="home-index-data-date">
                    <div class="home-index-data-date-first">
                        <div class="home-index-data-date-first-date" @click="showPicker = true">
                            {{ currentDateFormat }}
                        </div>
                        <van-image width="10" height="6" :src="lsxsjImage" />
                    </div>
                    <van-popup v-model:show="showPicker" position="bottom">
                        <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" v-model="currentDate"
                            :max-date="maxDate" />
                    </van-popup>
                    <div class="home-index-data-date-middle">至</div>
                    <div class="home-index-data-date-second">
                        <div class="home-index-data-date-second-date" @click="showPickerBottom = true">
                            {{ currentDateFormatInterval }}
                        </div>
                        <van-image width="10" height="6" :src="lsxsjImage" />
                    </div>
                    <van-popup v-model:show="showPickerBottom" position="bottom">
                        <van-date-picker @confirm="onConfirmBottom" @cancel="showPickerBottom = false"
                            v-model="currentDateBottom" :min-date="minDate" />
                    </van-popup>
                </div>
            </div>
            <div class="home-index-data-card">
                <div class="home-index-data-card-first">
                    <div class="home-index-data-card-first-first home-index-data-card-position"
                        @click="briefingProducts('招商选品')">
                        <van-image class="home-index-data-card-first-first-image" :src="icon_zhaoshangxuanpin" />
                        <div class="home-index-data-card-first-first-text home-index-data-card-position-text">
                            <div>{{ recruiterNum }}</div>
                            <div class="home-index-data-card-first-first-text home-index-data-card-position-text-size">
                                招商选品
                            </div>
                        </div>
                    </div>
                    <div class="home-index-data-card-first-second home-index-data-card-position"
                        @click="briefingProducts('产品出库')">
                        <van-image class="home-index-data-card-first-first-image" :src="icon_chanpinxuanpin" />
                        <div class="home-index-data-card-first-second-text home-index-data-card-position-text">
                            <div>{{ stockOutNum }}</div>
                            <div class="home-index-data-card-first-first-text1 home-index-data-card-position-text-size">
                                产品出库
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home-index-data-card-second">
                    <div class="home-index-data-card-second-first home-index-data-card-position"
                        @click="briefingProducts('如期还品')">
                        <van-image class="home-index-data-card-first-first-image" :src="icon_ruqihuanpin" />
                        <div class="home-index-data-card-second-first-text home-index-data-card-position-text">
                            <div>{{ putNum }}</div>
                            <div class="home-index-data-card-first-first-text3 home-index-data-card-position-text-size">
                                如期还品
                            </div>
                        </div>
                    </div>
                    <div class="home-index-data-card-second-second home-index-data-card-position"
                        @click="briefingProducts('超期还品')">
                        <van-image class="home-index-data-card-first-first-image" :src="icon_chaoqihuanpin" />
                        <div class="home-index-data-card-second-second-text home-index-data-card-position-text">
                            <div>{{ overPutNum }}</div>
                            <div class="home-index-data-card-first-first-text4 home-index-data-card-position-text-size">
                                超期还品
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-index-todo">
            <div class="home-index-todo-title">
                <van-image class="home-index-todo-title-image" :src="dbgzImage" />
                <div>待办工作</div>
            </div>
            <div class="home-index-todo-list">
                <div class="home-index-todo-list-first" v-for="(item, index) in centerList" :key="index"
                    @click="toProductList(item.id)">
                    <van-image class="home-index-todo-list-first-image" :src="item.img" />
                    <div>{{ item.name }}</div>
                    <div class="home-index-todo-list-first-badge" v-show="item.nums !== 0">
                        <div>{{ item.nums }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-index-shortcuts">
            <div class="home-index-shortcuts-title">
                <van-image class="home-index-todo-title-image" :src="kjrkImage" />
                <div>快捷入口</div>
            </div>
            <div class="home-index-shortcuts-card">
                <div class="home-index-shortcuts-card-lefts">
                    <div class="home-index-shortcuts-card-lefts-top" @click.prevent="addProduct('招商选品')">
                        <van-image :src="icon_zhaoshangxuanpinyi" class="home-index-shortcuts-card-lefts-top-image" />
                        <div class="shortcuts_left">
                            <div class="home-index-shortcuts-card-lefts-top-text">
                                招商选品
                            </div>
                            <div class="home-index-shortcuts-card-lefts-top-tips">
                                招商部选品入口
                            </div>
                        </div>
                    </div>
                </div>

                <div class="home-index-shortcuts-card-right">
                    <div class="home-index-shortcuts-card-right-top" @click.prevent="addProduct('研发选品')">
                        <van-image :src="icon_chanpinxuanpinyi" class="home-index-shortcuts-card-right-top-image" />
                        <div class="shortcuts_left home-index-shortcuts-card-right-top-left">
                            <div class="home-index-shortcuts-card-right-top-text">
                                研发选品
                            </div>
                            <div class="home-index-shortcuts-card-right-top-tips">
                                研发部选品入口
                            </div>
                        </div>
                    </div>
                    <div class="home-index-shortcuts-card-right-bottom" @click.prevent="addProduct('商品借调')">
                        <van-image :src="icon_shangpinjiediaoyi" class="home-index-shortcuts-card-right-bottom-image" />
                        <div class="shortcuts_left home-index-shortcuts-card-right-top-right">
                            <div class="home-index-shortcuts-card-right-bottom-text">
                                商品借调
                            </div>
                            <div class="home-index-shortcuts-card-right-bottom-tips">
                                主播间商品借调
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getInfo } from "@/api/supplierList/index";
import { statisticsPut, loanCount, homeAgencyReturned, queryDeptCount, getSelectionTimeList } from '@/api/operation/index'
import { listNotice } from '@/api/loginApi'
import { stripTags } from '@/utils/index'
import { showToast } from 'vant';
const route = useRoute();

// 消息
const icon_xiaoxi = new URL(
    "@/assets/operation/icon_xiaoxi.png",
    import.meta.url
).href;

// 快捷入口
const kjrkImage = new URL(
    "@/assets/home/icon_kuaijierukou@2x.png",
    import.meta.url
).href;
const icon_zhaoshangxuanpinyi = new URL(
    "@/assets/operation/icon_zhaoshangxuanpinyi.png",
    import.meta.url
).href;
const icon_chanpinxuanpinyi = new URL(
    "@/assets/operation/icon_chanpinxuanpinyi.png",
    import.meta.url
).href;
const icon_shangpinjiediaoyi = new URL(
    "@/assets/operation/icon_shangpinjiediaoyi.png",
    import.meta.url
).href;


// 数据简报
const sjjbImage = new URL(
    "@/assets/home/icon_shujujianbao@2x.png",
    import.meta.url
).href;
const lsxsjImage = new URL(
    "@/assets/home/icon_lansexiasanjiao.png",
    import.meta.url
).href;
const icon_chanpinxuanpin = new URL(
    "@/assets/operation/icon_chanpinxuanpin.png",
    import.meta.url
).href;

const icon_chaoqihuanpin = new URL(
    "@/assets/operation/icon_chaoqihuanpin.png",
    import.meta.url
).href;
const icon_ruqihuanpin = new URL(
    "@/assets/operation/icon_ruqihuanpin.png",
    import.meta.url
).href;
const icon_zhaoshangxuanpin = new URL(
    "@/assets/operation/icon_zhaoshangxuanpin.png",
    import.meta.url
).href;


// 待办工作
const dbgzImage = new URL(
    "@/assets/home/icon_daibangongzuo@2x.png",
    import.meta.url
).href;
// 公告
const gonggao = new URL(
    "@/assets/home/icon_gonggao.png",
    import.meta.url
).href;

// 消息数量
const messageTotal = ref(0)

const router = useRouter();
const userInfo = ref<any>({});
const userPost = ref<any>([])
const roles = ref<any>({});
const showPicker = ref(false);
const showPickerBottom = ref(false)
const recruiterNum = ref(0);
const stockOutNum = ref(0);
const putNum = ref(0);
const overPutNum = ref(0);
const versionNotice = ref()

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const currentDate = ref([
    year + "",
    month < 10 ? "0" + month : month + "",
    date < 10 ? "0" + date : date + "",
]);
const currentDateBottom = ref([
    year + "",
    month < 10 ? "0" + month : month + "",
    date < 10 ? "0" + date : date + "",
]);

/** 回显周期筛选字段 */
const startTime = computed(() => {
    return route.query.startTime;
});
/** 回显周期筛选字段 */
const endTime = computed(() => {
    return route.query.endTime;
});
const currentDateFormat = ref<any>(currentDate.value.join("-"))
const currentDateFormatInterval = ref<any>(currentDateBottom.value.join("-"))
onMounted(() => {
    startTime.value && (currentDateFormat.value = (startTime.value as any).split(' ')[0])
    endTime.value && (currentDateFormatInterval.value = (endTime.value as any).split(' ')[0])
    const datas = currentDateFormat.value.split('-')
    const dataSecond = datas[2].split(' ')[0]
    const datasBottom = currentDateFormatInterval.value.split('-')
    const dataBottomSecond = datasBottom[2].split(' ')[0]
    currentDate.value = [
        datas[0],
        datas[1],
        dataSecond
    ]
    currentDateBottom.value = [
        datasBottom[0],
        datasBottom[1],
        dataBottomSecond
    ]
    gettotalByUserIdAndTime()
    // 代办数量查询
    LoanCount()
    HomeAgencyReturned()
    getQueryDeptCount()
})

// 限制最大可选时间
const maxDate = computed(() => {
    return new Date(currentDateBottom.value.join('/'))
})

// 限制最小可选时间
const minDate = computed(() => {
    return new Date(currentDate.value.join('/'))
})

/** 数据简报跳转 */
const briefingProducts = (type: string) => {
    console.log('type', type)
    // if (['招商选品', '产品出库'].includes(type)) {
    //     router.push({
    //         path: '/selectionList',
    //         query: {
    //             type: type,
    //             startTime: currentDateFormat.value,
    //             endTime: currentDateFormatInterval.value
    //         }
    //     })
    // } else if (['如期还品', '超期还品'].includes(type)) {
    //     router.push({
    //         path: '/returnProductList',
    //         query: {
    //             type: type,
    //             startTime: currentDateFormat.value,
    //             endTime: currentDateFormatInterval.value
    //         }
    //     })
    // }
}

/** 日期选择 */
const onConfirm = () => {
    showPicker.value = false;
    currentDateFormat.value = currentDate.value.join("-")
    gettotalByUserIdAndTime();
};
/** 日期选择 */
const onConfirmBottom = () => {
    showPickerBottom.value = false
    currentDateFormatInterval.value = currentDateBottom.value.join("-")
    gettotalByUserIdAndTime();
}
/** 消息点击 */
const messageClcik = () => {
    router.push({
        path: `/notice`,
        query: {
            type: '运营部'
        }
    });
}
/** 获取首页数据简报 */
const gettotalByUserIdAndTime = async () => {
    const res = await statisticsPut({
        startTime: currentDateFormat.value,
        endTime: currentDateFormatInterval.value
    })
    recruiterNum.value = res?.data?.recruiterNum || 0
    stockOutNum.value = res?.data?.stockOutNum || 0
    putNum.value = res?.data?.putNum || 0
    overPutNum.value = res?.data?.overPutNum || 0
}

const LoanCount = async () => {
    const { data = 0 } = await loanCount({})
    centerList.value[0].nums = data
}
const HomeAgencyReturned = async () => {
    const { data = 0 } = await homeAgencyReturned({})
    centerList.value[1].nums = data
}

const centerList = ref([
    {
        name: "借调处理",
        nums: 0,
        id: "1",
        img: new URL("@/assets/operation/icon_jiediaochuli.png", import.meta.url).href,
    },
    {
        name: "待还品",
        nums: 0,
        id: "2",
        img: new URL("@/assets/operation/icon_daihuanpin.png", import.meta.url).href,
    },
]);

/** 首页快捷入口 */
const addProduct = (name: string) => {
    if (name == "招商选品") {
        (window as any).uni.webView.postMessage({
            data: {
                type: "scanCode",
                name: "investmentSelection",
            },
        });
    } 
    // else if (name == '研发选品') {
    //     (window as any).uni.webView.postMessage({
    //         data: {
    //             type: "scanCode",
    //             name: "researchSelection",
    //         },
    //     });
    // } else if (name == "商品借调") {
    //     router.push('/initiateSecondment')
    // }
};

const getList = async () => {
    const res = await getInfo();
    roles.value = res.data.user.roles[0];
    userInfo.value = res.data.user;
    userPost.value = res.data.posts || [];
};
getList();

/** 待办工作跳转 */
const toProductList = (id: string) => {
    console.log('ida', id)
    // if (id == '1') {
    //     router.push('/secondmentGoods')
    // } else if (id == '2') {
    //     router.push({
    //         path: '/waitReturn',
    //         query: {
    //             type: '待还品',
    //         }
    //     })
    // }
};


// 反显职位权限名称
const positionName = (data: any) => {
    let name: any = []
    data.forEach((item: any) => {
        name.push(item.postName)
    })
    return name.join('/')
}

/** 获取版本更新公告 */
const getNotice = async () => {
    const res = await listNotice({})
    const privacyNotice = res.rows.find(item => item.noticeTitle === '版本更新公告');
    if (privacyNotice) {
        versionNotice.value = stripTags(privacyNotice.noticeContent);
    }
}
getNotice();

/** uniapp端回传扫码数据 */
(window as any).msgFromUniapp = async function (arg) {
    const arr = arg.productId.split(',')
    // 招商选品
    if (arg.name == 'investmentSelection') {
        selectionOption(arr, 0, '当前是招商选品，请扫招商楼层码', '/investmentSelection')
    }
    // 研发选品
    if (arg.name == 'researchSelection') {
        selectionOption(arr, 1, '当前是研发选品，请扫研发楼层码', '/researchSelection')
    }
}

const selectionOption = (arr: any, key: number, msg: string, url: string) => {
    if (arr[1] == key) {
        selectionRouterGo(url, arr[0])
    } else {
        showToast(msg);
    }
}

const selectionRouterGo = async (url: string, id: string) => {
    const { msg = '' } = await getSelectionTimeList({ code: id })
    router.push({
        path: url,
        query: {
            shelvesCode: msg
        }
    })
}


// 运营部消息统计
const getQueryDeptCount = async () => {
    const { data = {} } = await queryDeptCount({ queryType: 0 })
    messageTotal.value = (data?.waitCount || 0) || (data?.readCount || 0)
}
</script>

<style lang="less" scoped>
.home-index {
    width: 100%;
    background: url("@/assets/home/icon_shouyebeijing.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 60px;
    color: #1a1b1c;
    overflow-y: scroll;

    &-user {
        height: 60px;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        position: relative;

        &-info {
            margin-left: 20px;
            margin-top: 10px;

            &-name {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                line-height: 16px;
                text-align: left;
                font-style: normal;
            }

            &-dandp {
                margin-top: 10px;
                font-size: 14px;
            }
        }
    }

    &-notice {
        margin-left: 15px;
        margin-right: 15px;
        width: calc(100 - 30px);
        box-sizing: border-box;
        height: 35px;
        background: linear-gradient(180deg, #DDF0FE 0%, #FFFFFF 100%);
        border-radius: 5px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        padding: 0 15px;

        .notice_icon {
            width: 14px;
            height: 14px;
        }

        .font {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-left: 10px;
            width: calc(100% - 30px);
            height: 35px;
        }

        :deep(.van-notice-bar) {
            background: none;
            padding: 0;
        }
    }

    &-data {
        height: 194px;
        background: url("@/assets/home/icon_shujubeijing.png") no-repeat;
        background-size: 100% 100%;
        padding: 15px 15px 0;
        margin: 15px;
        border-radius: 5px;

        &-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &-title {
                display: flex;
                width: 100px;

                &-text {
                    margin-left: 5px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 14px;
                    text-align: left;
                    font-style: normal;
                }
            }

            &-time {
                width: 140px;
                height: 24px;
                line-height: 24px;
                background: #d4edff;
                border-radius: 12px;
                display: flex;

                &-text {
                    margin: 2px 0;
                    width: 34px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    font-style: normal;
                }

                &-active {
                    background: #0094ff;
                    border-radius: 12px;
                    color: #ffffff;
                }
            }
        }

        &-card {
            margin-top: 15px;

            &-position {
                width: 140px;
                height: 64px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                padding-left: 3px;
                justify-content: center;

                &-text {
                    height: 36px;

                    div:nth-child(1) {
                        font-size: 16px;
                        font-weight: 600;
                        text-align: center;
                    }

                    div:nth-child(2) {
                        font-size: 12px;
                    }
                }

                .van-image {
                    width: 42px !important;
                    height: 42px !important;
                    margin-right: 15px;
                }
            }

            &-first {
                display: flex;
                justify-content: space-between;

                &-first {
                    background: linear-gradient(270deg, #e1e3fb 0%, #e2f2ff 100%);

                    &-text {
                        color: #0055ff;
                    }
                }

                &-second {
                    background: linear-gradient(270deg, #e1fbed 0%, #e2fff6 100%);

                    &-text {
                        color: #14ce67;
                    }
                }

            }

            &-second {
                display: flex;
                justify-content: space-between;
                margin-top: 15px;

                &-first {
                    background: linear-gradient(270deg, #fbe9e1 0%, #fff5e2 100%);

                    &-text {
                        color: #ff5a1a;
                    }
                }

                &-second {
                    background: linear-gradient(270deg, #FBE1F0 0%, #FFE2E2 100%);

                    &-text {
                        color: #FE4B4B;
                    }
                }


            }
        }

        &-date {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #0094ff;
            width: calc(100% - 75px);
            justify-content: flex-end;

            &-first {
                display: flex;
                align-items: center;

                &-date {
                    margin-right: 5px;
                }
            }

            &-middle {
                margin: 0 10px;
            }

            &-second {
                display: flex;
                align-items: center;

                &-date {
                    margin-right: 5px;
                }
            }
        }
    }

    &-todo {
        height: 100px;
        background-color: #ffffff;
        border-radius: 5px;
        padding: 15px 15px 0;
        margin: 15px;

        &-title {
            display: flex;
            align-items: center;

            div:nth-child(2) {
                margin-left: 5px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
            }
        }

        &-list {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;

            &-first {
                text-align: center;
                position: relative;
                width: 50px;
                text-align: center;

                .van-image {
                    width: 40px !important;
                    height: 40px !important;
                }

                div:nth-child(2) {
                    margin-top: 8px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #1a1b1c;
                    line-height: 12px;
                }

                &-badge {
                    height: 15px;
                    min-width: 15px;
                    border-radius: 8px 8px 8px 0;
                    background-color: #fc2540;
                    border: 1px solid #fff;
                    position: absolute;
                    left: 35px;
                    top: -3px;

                    div {
                        color: #ffffff;
                        font-size: 11px;
                        text-align: center;
                        padding: 2px;
                    }
                }
            }
        }
    }

    &-shortcuts {
        height: 213px;
        padding: 15px 15px 0;
        margin: 15px;
        background-color: #ffffff;
        border-radius: 5px;
        margin-bottom: 60px;

        &-title {
            display: flex;
            align-items: center;

            div:nth-child(2) {
                margin-left: 5px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
            }
        }

        &-card {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            &-left {
                height: 160px;
                width: 154px;
                background: url("@/assets/operation/icon_zhaoshangxuanpinbeijing.png") no-repeat;
                background-size: 100% 100%;
                position: relative;

                &-image {
                    position: absolute;
                    left: 15px;
                    top: 15px;
                    width: 54px;
                    height: 54px;
                }

                &-text {
                    position: absolute;
                    right: 20px;
                    top: 27px;
                    font-size: 14px;
                    color: #ffffff;
                }

                &-tips {
                    margin: 15px 15px 0;
                    width: 123px;
                    position: absolute;
                    top: 70px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #ffffff;
                    line-height: 16px;
                }
            }

            &-right {
                margin-left: 10px;

                &-top {
                    width: 152px;
                    height: 74px;

                    background: url("@/assets/operation/icon_chanpinxuanpinbeijing.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    box-sizing: border-box;
                    padding: 0 0 0 12px;
                    justify-content: space-around;
                    align-items: center;

                    &-image {
                        width: 40px;
                        height: 40px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                        line-height: 20px;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }

                &-bottom {
                    width: 152px;
                    height: 74px;
                    margin-top: 11px;

                    background: url("@/assets/operation/icon_shangpinjiediaobeijing.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    box-sizing: border-box;
                    padding: 0 0 0 12px;
                    justify-content: space-around;
                    align-items: center;

                    &-image {
                        width: 40px;
                        height: 40px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                        line-height: 20px;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }
            }

            &-lefts {

                &-top {
                    width: 152px;
                    height: 159px;

                    background: url("@/assets/operation/icon_zhaoshangxuanpinbeijing.png") no-repeat;
                    background-size: 100% 100%;
                    box-sizing: border-box;
                    padding: 14px 15px;

                    &-image {
                        width: 54px;
                        height: 54px;
                        margin-bottom: 15px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                        line-height: 2;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }

                &-bottom {
                    width: 152px;
                    height: 74px;
                    margin-top: 11px;

                    background: url("@/assets/productHome/icon_lansebeijing.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    box-sizing: border-box;
                    padding: 0 12px;
                    justify-content: space-around;
                    align-items: center;


                    &-image {
                        width: 40px;
                        height: 40px;
                    }

                    &-text {
                        font-size: 14px;
                        color: #ffffff;
                    }

                    &-tips {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 16px;
                    }
                }
            }
        }
    }

    .supplier_detail_content_divorder {
        border-bottom: 1px solid #fafaff;
    }

    .supplier_detail_content_div_first {
        margin-top: 63vh;
    }

    .supplier_detail_content_div {
        font-size: 13px;
        height: 35px;
        // height: 25%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        :deep(.van-icon) {
            margin-left: 0% !important;
        }

        .label {
            min-width: 55px;
        }

        .van-image {
            width: 32px;
            height: 32px;
        }

        .value {
            color: #b8beca;
            max-width: calc(100% - 85px);
            display: flex;
            justify-content: right;
            word-break: break-all;
        }
    }

    .home-index-user-image {
        width: 60px;
        height: 60px;
    }

    .menu {
        position: absolute;
        right: 15px;

        .menu_cion {
            width: 20px;
            height: 20px;
        }
    }

    .erweima_cion {
        width: 14px;
        height: 14px;
        margin-top: 10px;
        position: absolute;
        right: 50px;
    }

    .QRcode {
        width: 315px;
        height: 350px;
        background-color: white;
        border-radius: 5px;

        .code_title {
            text-align: center;
            font-size: 16px;
            font-weight: Medium;
            padding-top: 28px;

            .guanbi_cion {
                position: absolute;
                top: 18px;
                right: 18px;
            }
        }

        .code {
            width: 201px;
            height: 201px;
            margin: 15px 57px;

            .code_content {
                width: 100%;
                height: 100%;
            }
        }

        .weixin_cion {
            margin-left: 141px;
        }
    }

    .savePicture {
        text-align: center;
        padding: 20px;
    }

    .right_popup {
        box-sizing: border-box;
        padding: 50px 15px;
        color: #1C1D1E;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        align-content: space-between;

        .right_popup_box {
            width: 100%;

            .right_popup_box_item {
                width: 100%;
                padding: 10px 0;
                border-bottom: 1px solid #efefef;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .right_popup_box_item_left {
                    display: flex;
                    align-items: center;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 20px;
                    }
                }
            }
        }

        .login-index-policy-text-rules {
            color: #009EFF;
            font-size: 13px;
            width: 100%;
            margin-top: 65vh;
        }

        .login-index-policy-text-rule {
            color: #009EFF;
            font-size: 13px;
            width: 100%;
        }

        .quit_button {
            width: 100%;
            height: 44px;
            background: #FDE7E7;
            border-radius: 5px;
            text-align: center;
            color: #FC2540;
            line-height: 44px;

            .quit_cion {
                width: 14px;
                height: 14px;
            }
        }
    }

    .home-index-data-card-first-first-text {
        white-space: nowrap;
    }

    .home-index-todo-title-image {
        width: 14px;
        height: 14rpx;
    }

    .home-index-data-card-first-first-image {
        width: 32px;
        height: 32px;
    }

    .home-index-todo-list-first-image {
        width: 25px;
        height: 25px;
    }

    .shortcuts_left {
        margin-left: 5px;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }
}
</style>